<!--
 * @Description: 我的作业
 * @FilePath: /lieshou-app/pages/my/my_tsaks.vue
-->

<template>
  <view class="content">
    <!-- 1 -->
    <z-paging ref="paging" safe-area-inset-bottom="true">
      <view slot="top">
        <zNav title="我的作业" :showBack="true"></zNav>
      </view>
      <!-- 主tab -->
      <zMainTab :active="mainActive" @activeTab="getCurMainActive"></zMainTab>

      <!-- 列表信息 -->
      <view
        class="card"
        v-for="(item, index) in dataList"
        :key="index"
        @click="openPopup"
      >
        <!-- top -->
        <view class="title">
          <text class="title-left">{{ item.title }}</text>
          <view class="title-right">
            <image class="icon" src="@/static/image/my/medal-icon.png"></image>
            <text>5学分</text>
          </view>
        </view>

        <!-- 间隔 -->
        <view class="inter"></view>

        <view class="info">
          <view class="question">{{ item.question }}</view>
          <view class="ask">{{ item.ask }}</view>
        </view>

        <!-- 间隔 -->
        <view class="inter"></view>

        <!-- 按钮操作 -->
        <view class="buttons">
          <uv-row justify="flex-start" gutter="10">
            <uv-col span="3">
              <div class="action-button continue" @click="continueStudy(task)">
                <image
                  class="icon"
                  src="@/static/image/my/btn-bg-icon.png"
                ></image>
                <text class="txt">已点评</text>
              </div>
            </uv-col>
          </uv-row>
        </view>

        <!-- 优秀作业 -->
        <image
          class="excellent"
          src="@/static/image/my/excellent.png"
        ></image>
      </view>
    </z-paging>

    <!-- 弹出层 -->
    <!-- :close-on-click-overlay="false" -->
    <uv-popup round="10" ref="popup" mode="center">
      <view class="popup-content" style="width: 684rpx; height: 1200rpx">
        <view class="title">《100天拓展有效联系人》</view>
        <view class="subTitle">详细作业内容</view>
        <view class="msg">
          <view class="question"
            >Q：说说你最近在线上软件拓展有效联系人的方法</view
          >
          <view class="ask"
            >A：①
            用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多②
            用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。</view
          >
          <view class="upload">
            <view class="desc">上传图片</view>
            <view class="imgs">
              <image
                class="icon"
                src="@/static/image/my/btn-bg-icon.png"
              ></image>
              <image
                class="icon"
                src="@/static/image/my/btn-bg-icon.png"
              ></image>
              <image
                class="icon"
                src="@/static/image/my/btn-bg-icon.png"
              ></image>
            </view>
          </view>
          <view class="comment">
            <!-- <rich-text :nodes="nodes"></rich-text> -->
            <text
              >班主任点评：恭喜你，在转化率黑客的道路上，又进了一步~~
              这节课，我们从动力、阻力、触点三个方面，跟你分享了提升转化率的思路和方法。希望你在学习之后，对于提升转化率的底层框架，有更深入的理解。
              在实践这些理论的时候，还要提醒你两个重要的事情：
              第一个事情：动力阻力触点的使用，是基于用户需求稳定，且你的产品可以基本满足用户需求的情况下。如果你的产品内核还没有打磨得足够Sharp，去打磨产品内核的ROI会更高一些。
            </text>
          </view>
        </view>
        <view class="btn">
          <!-- <image class="icon" src="@/static/image/my/btn-bg-icon.png"></image> -->
          <text class="txt">确认</text>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import zNav from '@/components/z-nav.vue';
import zMainTab from './components/z-main-tab.vue';

export default {
  components: {
    zNav,
    zMainTab,
  },
  data() {
    return {
      mainActive: 'tdbx',
      dataList: [
        {
          title: '《100天拓展有效联系人》',
          chapter: '第一章·第1节 社交软件拓展联系人',
          progress: 44,
          currentTime: '01:56:00',
          totalTime: '03:15:00',
          status: ['已学完', '已提交作业', '已解锁奖励'],
          canSubmit: false,
          question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
          ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...',
        },
        {
          title: '《100天拓展有效联系人》',
          chapter: '第一章·第1节 社交软件拓展联系人',
          progress: 100,
          currentTime: '03:15:00',
          totalTime: '03:15:00',
          status: [1, 0, 0],
          canSubmit: true,
          question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
          ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...',
        },
        {
          title: '《100天拓展有效联系人》',
          chapter: '第一章·第1节 社交软件拓展联系人',
          progress: 100,
          currentTime: '03:15:00',
          totalTime: '03:15:00',
          status: ['已学完', '已提交作业', '已解锁奖励'],
          canSubmit: true,
          question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
          ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...',
        },
      ],
    };
  },
  async onLoad() {
    let userInfo = await this.$utils.getStorage('userInfo');
    if (userInfo) {
      this.userInfo = userInfo;
      this.$utils.showLog('获取用户信息我的学籍-页面', userInfo);
    }
  },
  methods: {
    openPopup() {
      this.$refs.popup.open();
    },
    getCurMainActive(e) {
      this.mainActive = e.nid;
    },
  },
};
</script>

<style lang="scss">
page {
  background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.content {
  width: 100%;
  height: 100%;

  .card {
    position: relative;
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0px 28rpx 40rpx;
    padding: 18rpx 24rpx 16rpx 12rpx;
    box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);

    &:first-of-type {
      margin-top: 16rpx;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 42rpx;

      &-left {
        font-size: 28rpx;
        color: rgba(43, 43, 43, 1);
      }

      &-right {
        font-size: 20rpx;
        color: rgba(0, 0, 0, 1);
        display: flex;
        align-items: center;
        .icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 4prx;
        }
      }
    }

    .info {
      margin-top: 20rpx;
      font-size: 20rpx;
      padding-left: 12rpx;
      color: rgba(43, 43, 43, 1);
      font-size: 20rpx;

      .question {
        line-height: 30rpx;
      }

      .ask {
        max-height: 244rpx;
        line-height: 30rpx;
        margin-top: 24rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        // display: -webkit-box; /* 必须设置为盒子模型以支持多行省略号 */
        -webkit-line-clamp: 8;
      }
    }

    .buttons {
      margin-top: 16rpx;

      .action-button {
        height: 40rpx;
        width: 100%;
        line-height: 40rpx;
        font-size: 20rpx;
        position: relative;
        color: rgba(0, 0, 0, 1);

        .icon {
          width: 100%;
          height: 100%;
        }

        .txt {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
        }
      }
    }

    .excellent {
      position: absolute;
      right: 8rpx;
      bottom: 8rpx;
      width: 158rpx;
      height: 152rpx;
    }

    .inter {
      width: 652rpx;
      height: 2rpx;
      background-color: rgba(235, 235, 235, 1);
      margin: 12rpx auto 16rpx;
    }
  }
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 30rpx;
  box-sizing: border-box;
  .title {
    font-size: 36rpx;
    color: rgba(0, 0, 0, 1);
    line-height: 52rpx;
  }
  .subTitle {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 1);
    line-height: 52rpx;
  }
  .msg {
    margin: 36rpx 20rpx 0;
    overflow: scroll;
    .question {
      font-size: 28rpx;
      color: rgba(43, 43, 43, 1);
      line-height: 40rpx;
    }
    .ask {
      font-size: 24rpx;
      margin-top: 44rpx;
      line-height: 34rpx;
      color: rgba(43, 43, 43, 1);
    }
    .upload {
      margin-top: 44rpx;
      .desc {
        font-size: 24rpx;
        line-height: 34rpx;
        color: rgba(43, 43, 43, 1);
      }
      .imgs {
        display: flex;
        justify-content: space-between;
        .icon {
          width: 176rpx;
          height: 260rpx;
          border-radius: 8rpx;
        }
      }
    }
    .comment {
      margin-top: 50rpx;
      background: rgba(239, 156, 211, 0.15);
      font-size: 20rpx;
      line-height: 28rpx;
      color: rgba(0, 0, 0, 1);
    }
  }
  .btn {
    width: 198rpx;
    height: 68rpx;
    border-radius: 22rpx;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(250, 125, 190, 1) 100%
    );
    border: 2rpx solid rgba(151, 151, 151, 1);
    .txt {
      width: 100%;
      height: 100%;
      line-height: 68rpx;
      color: rgba(0, 0, 0, 1);
      font-size: 28rpx;
      text-align: center;
      display: inline-block;
    }
  }
}
</style>
